<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="shortcut icon" href="/qingzhu/images/s.ico" type="image/x-icon">
	<link rel="stylesheet" href="/qingzhu/css/reset.css">
	<link rel="stylesheet" href="/qingzhu/css/common.css">
	<link rel="stylesheet" href="/qingzhu/css/detail.css">
	<title>商品详情</title>
</head>
<body>
<!-- 顶部栏 -->
<div th:replace="/qingzhu/front/head_and_footer::head"></div>
<!-- 顶部栏结束 -->

<div class="outer10">
	<div class="inter1">
		<div class="inter11">
			<a href="/index.html">首页</a> > <a href="/qingzhu/front/allproducts.html">所有商品</a> > <span th:text="${goodsDetail.goodsName}">简约时尚水泥花瓶</span>
		</div>
	</div>
	<div class="inter2">
		<div class="inter21">
			<a href="javascript:void(0)"><img th:src="@{${goodsDetail.goodsCoverImg}}" alt=""></a>
			<a href="javascript:void(0)" class="small"><img th:src="@{${goodsDetail.goodsCoverImg}}" alt=""></a>
		</div>
		<div class="inter22">
			<h1 th:text="${goodsDetail.goodsName}"> 简约时尚水泥花瓶</h1>
			<p th:text="${goodsDetail.goodsDescription}">精选材料，设计大师设计，做工精细，摆件中的艺术品</p>
			<div class="inter221">
				<span class="s1">￥</span>
				<span class="s2" th:text="${goodsDetail.sellingPrice}">450</span>
				已售出<span class="s3">0</span>件
			</div>
			<h3>选择数量</h3>
			<div class="inter222">
				<div class="inter2221">
					<a href="javascript:void(0)" class="sub"> - </a>
					<input id="count" type="text" value="1" class="count">
					<a href="javascript:void(0)" class="add">+</a>
				</div>
				件（库存<span class="stock" th:text="${goodsDetail.stock}">2344</span>件）
				<a href="javascript:void(0)" class="car" th:onclick="'saveToCart('+${goodsDetail.goodsId}+')'">加入购物车</a>
			</div>
		</div>
	</div>
</div>

<!-- footer部分开始 -->
<div th:replace="/qingzhu/front/head_and_footer::footer"></div>

<!-- 返回顶部 -->
<div th:replace="/qingzhu/front/head_and_footer::back_to_top"></div>

<script src="/qingzhu/js/jquery-3.3.1.min.js"></script>
<script src="/qingzhu/js/detail.js"></script>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("#show-all-type").hover(function () {
			$("#all-type").show()
		}, function () {
			$("#all-type").hide()
		});
		$("#all-type").hover(function () {
			$("#all-type").show()
		}, function () {
			$("#all-type").hide()
		})
	})
</script>

<script type="text/javascript">
	/**
	 * 添加到购物车
	 */
	function saveToCart(id) {
		var goodsCount = $("#count").val();
		var data = {
			"goodsId": id,
			"goodsCount": goodsCount
		};
		$.ajax({
			type: 'POST',
			url: '/shop-cart',
			contentType: 'application/json',
			data: JSON.stringify(data),
			success: function (result) {
				if (result.resultCode === 200) {
					swal({
						title: "添加成功",
						text: "确认框",
						icon: "success",
						buttons: true,
						dangerMode: true,
					}).then((flag) => {
						window.location.reload();
					}
				)
				} else {
					swal(result.message, {
						icon: "error",
					});
				}
			},
			error: function () {
				swal("操作失败", {
					icon: "error",
				});
			}
		});
	}

	/**
	 * 添加到购物车并跳转至购物车页面
	 */
	function saveAndGoCart(id) {
		var goodsCount = 1;
		var data = {
			"goodsId": id,
			"goodsCount": goodsCount
		};
		$.ajax({
			type: 'POST',
			url: '/shop-cart',
			contentType: 'application/json',
			data: JSON.stringify(data),
			success: function (result) {
				if (result.resultCode == 200) {
					swal({
						title: "已将商品加入购物车",
						icon: "success",
						buttons: {
							cancel: "留在当前页",
							confirm: "去购物车结算"
						},
						dangerMode: false,
					}).then((flag) => {
						if (flag) {
							window.location.href = '/shop-cart';
						}
					}
				);
				} else {
					swal(result.message, {
						icon: "error",
					});
				}
			},
			error: function () {
				swal("操作失败", {
					icon: "error",
				});
			}
		});
	}
</script>
</body>
</html>



<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--	<meta charset="UTF-8">-->
<!--	<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--	<meta http-equiv="X-UA-Compatible" content="ie=edge">-->

<!--	<link rel="shortcut icon" href="/images/s.ico" type="image/x-icon">-->
<!--	<link rel="stylesheet" href="/css/reset.css">-->
<!--	<link rel="stylesheet" href="/css/common.css">-->
<!--	<link rel="stylesheet" href="/css/detail.css">-->
<!--	<title>商品详情</title>-->
<!--</head>-->
<!--<body>-->
<!--&lt;!&ndash; 顶部栏 &ndash;&gt;-->
<!--<div class="header">-->
<!--	&lt;!&ndash; 顶部栏版心 &ndash;&gt;-->
<!--	<div class="inner_c header_c">-->
<!--		&lt;!&ndash; 所有类别弹出栏 &ndash;&gt;-->
<!--		<div id="all-type" class="all-type">-->
<!--			&lt;!&ndash; 所有类别 &ndash;&gt;-->
<!--			<div class="fix-width">-->
<!--				<ul class="type-left">-->
<!--					<li>-->
<!--						<a href="#">不锈钢</a>-->
<!--					</li>-->
<!--					<li>-->
<!--						<a href="#">原料水泥</a>-->
<!--					</li>-->
<!--					<li>-->
<!--						<a href="#">塑料</a>-->
<!--					</li>-->
<!--					<li>-->
<!--						<a href="#">木制</a>-->
<!--					</li>-->
<!--					<li>-->
<!--						<a href="#">陶瓷</a>-->
<!--					</li>-->
<!--				</ul>-->
<!--				<div class="type-right">-->
<!--					<ul>-->
<!--						<li>-->
<!--							<a href="#" class="goods-link" target="_blank" title="简约原木餐盘">-->
<!--								<img src="/images/img25.png" alt="简约原木餐盘">-->
<!--							</a>-->
<!--							<a href="#" class="goods-title" title="简约原木餐盘" target="_blank">简约原木餐盘</a>-->
<!--							<div class="price">-->
<!--								<span>￥300.00</span>-->
<!--							</div>-->
<!--							<a href="#" class="mask">-->
<!--								<span>查看详情</span>-->
<!--							</a>-->
<!--						</li>-->
<!--						<li>-->
<!--							<a href="#" class="goods-link" target="_blank" title="不锈钢时尚咖啡水壶">-->
<!--								<img src="/images/img26.png" alt="不锈钢时尚咖啡水壶">-->
<!--							</a>-->
<!--							<a href="#" class="goods-title" title="不锈钢时尚咖啡水壶" target="_blank">不锈钢时尚咖啡水壶</a>-->
<!--							<div class="price">-->
<!--								<span>￥400.00</span>-->
<!--							</div>-->
<!--							<a href="#" class="mask">-->
<!--								<span>查看详情</span>-->
<!--							</a>-->
<!--						</li>-->
<!--						<li>-->
<!--							<a href="#" class="goods-link" target="_blank" title="经典系列红色时钟">-->
<!--								<img src="/images/img103.png" alt="经典系列红色时钟">-->
<!--							</a>-->
<!--							<a href="#" class="goods-title" title="经典系列红色时钟" target="_blank">经典系列红色时钟</a>-->
<!--							<div class="price">-->
<!--								<span>￥580.00</span>-->
<!--							</div>-->
<!--							<a href="#" class="mask">-->
<!--								<span>查看详情</span>-->
<!--							</a>-->
<!--						</li>-->
<!--					</ul>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
<!--		&lt;!&ndash; 左边导航栏 &ndash;&gt;-->
<!--		<div class="topnav-left">-->
<!--			<div class="logo">-->
<!--				<a href="index.html">-->
<!--					<img src="/images/logo.png" alt="logo">-->
<!--				</a>-->
<!--			</div>-->
<!--			<ul>-->
<!--				<li id="show-all-type">-->
<!--					<a href="#">查看所有类别</a>-->
<!--				</li>-->
<!--				<li>-->
<!--					<a href="index.html">首页</a>-->
<!--				</li>-->
<!--				<li>-->
<!--					<a href="allproducts.html">所有产品</a>-->
<!--				</li>-->
<!--				<li>-->
<!--					<a href="blog.html">博客</a>-->
<!--				</li>-->
<!--				<li>-->
<!--					<a href="article.html">文章列表</a>-->
<!--				</li>-->
<!--			</ul>-->
<!--		</div>-->
<!--		&lt;!&ndash; 右边导航栏 &ndash;&gt;-->
<!--		<div class="topnav-right">-->
<!--			&lt;!&ndash; 搜索栏 &ndash;&gt;-->
<!--			<a href="#" class="search"></a>-->
<!--			<a href="login.html" class="topnav-right-font">登录</a>-->
<!--			<span class="topnav-right-font">|</span>-->
<!--			<a href="register.html" class="topnav-right-font">注册</a>-->
<!--			&lt;!&ndash; 购物车和购物车详情 &ndash;&gt;-->
<!--			<div class="shop-cart-and-cart-detail">-->
<!--				&lt;!&ndash; 购物车 &ndash;&gt;-->
<!--				<div class="shop-cart">-->
<!--					<span class="cart-icon"></span>-->
<!--					<span class="cart-number">0</span>-->
<!--				</div>-->
<!--				&lt;!&ndash; 购物车详情&ndash;&gt;-->
<!--				<div class="cart-detail">-->
<!--					<p class="con">0件商品 共计：<span>￥0</span></p>-->
<!--					<a href="shopcart.html" class="btn">结算</a>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
<!--	</div>-->
<!--</div>-->
<!--&lt;!&ndash; 顶部栏结束 &ndash;&gt;-->

<!--<div class="outer10">-->
<!--	<div class="inter1">-->
<!--		<div class="inter11">-->
<!--			<a href="index.html">首页</a> > <a href="">所有商品</a> > <span>简约时尚水泥花瓶</span>-->
<!--		</div>-->
<!--	</div>-->
<!--	<div class="inter2">-->
<!--		<div class="inter21">-->
<!--			<a href="javascript:void(0)"><img src="/images/png2.png" alt=""></a>-->
<!--			<a href="javascript:void(0)" class="small"><img src="/images/png2.png" alt=""></a>-->
<!--		</div>-->
<!--		<div class="inter22">-->
<!--			<h1> 简约时尚水泥花瓶</h1>-->
<!--			<p>精选材料，设计大师设计，做工精细，摆件中的艺术品</p>-->
<!--			<div class="inter221">-->
<!--				<span class="s1">￥</span>-->
<!--				<span class="s2">450</span>-->
<!--				已售出<span class="s3">0</span>件-->
<!--			</div>-->
<!--			<h3>选择数量</h3>-->
<!--			<div class="inter222">-->
<!--				<div class="inter2221">-->
<!--					<a href="javascript:void(0)" class="sub"> - </a>-->
<!--					<input type="text" value="1" class="count">-->
<!--					<a href="javascript:void(0)" class="add">+</a>-->
<!--				</div>-->

<!--				件（库存<span class="stock">2344</span>件）-->
<!--				<a href="shopcart.html" class="car">加入购物车</a>-->
<!--			</div>-->
<!--		</div>-->
<!--	</div>-->
<!--</div>-->


<!--&lt;!&ndash; footer部分开始 &ndash;&gt;-->
<!--<div class="footer">-->
<!--	<div class="footer_c inner_c">-->
<!--		<div class="footer_top">-->
<!--			<div class="bir">-->
<!--				<a href="#">-->
<!--					<img src="/images/logo.png" alt="">-->
<!--				</a>-->
<!--				<div class="info">-->
<!--					青竹良品原创生活类电商品牌，秉承一贯的严谨态度，我们深入世界各地，从源头全程严格把控商品生产环节，力求帮消费者甄选到最优质的商品，全线采用天然原材料，控制甲醛低量无害，采用进口工艺，国际生产线不断优化，食材保证核心原产地新鲜直供，让你享受品质生活-->
<!--				</div>-->
<!--			</div>-->
<!--			<div class="about">-->
<!--				<dl>-->
<!--					<dt>-->
<!--						<a href="#">关于我们</a>-->
<!--					</dt>-->
<!--					<dd>-->
<!--						<a href="#">我的品牌</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">公司动态</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">经历发展</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">商品推广</a>-->
<!--					</dd>-->
<!--				</dl>-->
<!--				<dl>-->
<!--					<dt>-->
<!--						<a href="#">支付方式</a>-->
<!--					</dt>-->
<!--					<dd>-->
<!--						<a href="#">微信支付</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">支付宝</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">百度钱包</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">货到付款</a>-->
<!--					</dd>-->
<!--				</dl>-->
<!--				<dl>-->
<!--					<dt>-->
<!--						<a href="#">相关服务</a>-->
<!--					</dt>-->
<!--					<dd>-->
<!--						<a href="#">退货政策</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">购物流程</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">客服服务</a>-->
<!--					</dd>-->
<!--					<dd>-->
<!--						<a href="#">商务合作</a>-->
<!--					</dd>-->
<!--				</dl>-->
<!--			</div>-->
<!--			<div class="ewm">-->
<!--				<p class="wx">-->
<!--					<img src="/images/img71.png" alt="">-->
<!--					<span>微信公众号</span>-->
<!--				</p>-->
<!--				<p class="wb">-->
<!--					<img src="/images/img72.png" alt="">-->
<!--					<span>微博公众号</span>-->
<!--				</p>-->
<!--			</div>-->
<!--		</div>-->
<!--	</div>-->
<!--	<div class="footer_bar">-->
<!--		<div class="footer_bar_c inner_c">-->
<!--			<div class="pay">-->
<!--				<p class="copy">-->
<!--					2019 © youhaosuda.com-->
<!--				</p>-->
<!--				<p class="ico">-->
<!--					<a href="#">-->
<!--						<img src="/images/img81.png" alt="">-->
<!--					</a>-->
<!--					<a href="#">-->
<!--						<img src="/images/img82.png" alt="">-->
<!--					</a>-->
<!--					<a href="#">-->
<!--						<img src="/images/img83.png" alt="">-->
<!--					</a>-->
<!--					<a href="#">-->
<!--						<img src="/images/img84.png" alt="">-->
<!--					</a>-->
<!--					<a href="#">-->
<!--						<img src="/images/img85.png" alt="">-->
<!--					</a>-->
<!--					<a href="#">-->
<!--						<img src="/images/img86.png" alt="">-->
<!--					</a>-->
<!--					<a href="#">-->
<!--						<img src="/images/img87.png" alt="">-->
<!--					</a>-->
<!--				</p>-->
<!--			</div>-->
<!--			<div class="super">-->
<!--				<a href="#" class="pic1">-->

<!--				</a>-->
<!--				<a href="#" class="pic2">-->

<!--				</a>-->
<!--				<a href="#" class="pic3">-->

<!--				</a>-->
<!--			</div>-->
<!--		</div>-->
<!--	</div>-->
<!--</div>-->

<!--&lt;!&ndash; 返回顶部 &ndash;&gt;-->
<!--<div class="lingpin_top">-->
<!--	<a href="#" class="qq">QQ<br />客服</a>-->
<!--	<a href="#" class="wx">微信<br />客服</a>-->
<!--	<a href="#" class="top_c">↑</a>-->
<!--</div>-->

<!--<script src="/js/jquery-3.3.1.min.js"></script>-->
<!--<script src="/js/detail.js"></script>-->
<!--<script type="text/javascript">-->
<!--    $(document).ready(function () {-->
<!--        $("#show-all-type").hover(function () {-->
<!--            $("#all-type").show()-->
<!--        }, function () {-->
<!--            $("#all-type").hide()-->
<!--        });-->
<!--        $("#all-type").hover(function () {-->
<!--            $("#all-type").show()-->
<!--        }, function () {-->
<!--            $("#all-type").hide()-->
<!--        })-->
<!--    })-->
<!--</script>-->
<!--</body>-->
<!--</html>-->